<template>
  <div class="echart-part">
    <echart-title :title="para.title"></echart-title>
    <div :id="para.id" class="echart_content" style="align-items: center;">
      <div class="myflex myheight" style="width: 100%;">
        <div style="position:relative;" class="myheight">
<!--                    <img src="@/assets/images/large-screen/柱状.png" class="myimg">-->
          <div id="blue_svgaCanvas" style="width: 100%;height: 100%"></div>

          <div class="myfont myposition" style="top: 20%">{{package}}条</div>
          <div class="myfont2 myposition" style="top: 40%">打包</div>

        </div>
        <div style="position: relative;" class="myheight">
          <!--          <img src="@/assets/images/large-screen/柱状备份.png" class="myimg">-->
          <div id="green_svgaCanvas" style="width: 100%;height: 100%"></div>

          <div class="myfont myposition" style="top: 20%;color: #45FFFF">{{distribute}}条</div>
          <div class="myfont2 myposition" style="top: 40%;color: #45FFFF">分发</div>
        </div>
        <div style="position: relative;" class="myheight">
          <!--          <img src="@/assets/images/large-screen/柱状备份 2.png" class="myimg">-->
          <div id="yellow_svgaCanvas" style="width: 100%;height: 100%"></div>

          <div class="myfont myposition" style="top: 20%;color: #FF842C">{{ transit }}条</div>
          <div class="myfont2 myposition" style="top: 40%;color: #FF842C">中转执行</div>
        </div>
      </div>

    </div>
  </div>
</template>

<script>
const echarts = require('echarts')
import statService from '@/api/stat/stat'
import EchartTitle from "../common/echart-title";
import SVGA from "svgaplayerweb";


let color1 = ['#FFFF33', '#33FFDD', '#FF8800']
let color2 = ['#99FF33', '#FF0000']
let myChart
export default {
  name: 'module-abnormal-count',
  components: {EchartTitle},
  props: {
    para: {}
  },
  data() {
    return {
      timer: '',
      data: [],
      des: [],
      reload: false,
      package:0,
      distribute:0,
      transit:0,
    }
  },
  mounted() {
    // this.getData()
    // this.createSVGA()

  },
  beforeDestroy() {
    if (this.timer) { //如果定时器还在运行 或者直接关闭，不用判断
      clearInterval(this.timer) //关闭
    }
  },

  methods: {
    createSVGA() {
      let player_blue = new SVGA.Player('#blue_svgaCanvas');
      let player_green = new SVGA.Player('#green_svgaCanvas');
      let player_yellow = new SVGA.Player('#yellow_svgaCanvas');
      let parser_blue = new SVGA.Parser('#blue_svgaCanvas');
      let parser_green  = new SVGA.Parser('#green_svgaCanvas');
      let parser_yellow = new SVGA.Parser('#yellow_svgaCanvas');
      parser_blue.load('package_blue.svga', function (videoItem) {
        player_blue.setVideoItem(videoItem);
        player_blue.startAnimation();
      }, err => {
        console.error(err)
      })
      parser_green.load('dispatch_green.svga', function (videoItem) {
        player_green.setVideoItem(videoItem);
        player_green.startAnimation();
      }, err => {
        console.error(err)
      })
      parser_yellow.load('transit_yellow.svga', function (videoItem) {
        player_yellow.setVideoItem(videoItem);
        player_yellow.startAnimation();
      }, err => {
        console.error(err)
      })
    },
    getData() {
      this.data = []
      this.des = []
      this.reload = false
      statService.queryAuditCount().then(res => {
        //数据处理
        if (res.success) {
          for(let item of res.data){
            if(item.status==-3){
              this.package=item.count
            }else if(item.status==-5){
              this.distribute=item.count
            }else if(item.status==-6){
              this.transit=item.count
            }
          }
        }
      }).catch((err) => console.log(err)) // 捕获异常;
    },

    draw() {
      let div = document.getElementById(this.para.id)
      if (!myChart || !div.innerHTML) {
        myChart = document.getElementById(this.para.id)
      }
      echarts.init(myChart).setOption(option)
    },
    formatCount(item) {
      let count = parseInt(item.count)
      let status = parseInt(item.status)
      if (status == 5 || status == 6) {
        return
      }
      let str = ''
      let img = ''
      let color = ''
      switch (status) {
        case 0:
          str = '待打包'
          img = '/admin.jpg',
            color = color1[0]
          break //待打包
        case 1:
          str = '已打包'
          img = 'admin.jpg'
          color = color1[1]
          break //已打包
        case 2:
          str = '已分发'
          img = '/public/admin.jpg'
          color = color1[2]
          break //已分发
        case 3:
          str = '执行成功'
          img = './public/admin.jpg'
          color = color2[0]
          break //执行成功
        case 4:
          str = '执行失败'
          img = '/models/admin.jpg'
          color = color2[1]
          break //执行失败
      }
      this.data.push({
        value: count
      })
      this.des.push(str)
    }
  }
}
</script>

<style scoped>


.mybackground {
  background: rgba(17, 35, 60, 0.50);
  border-radius: 10px;
}

.myflex {
  display: flex;
  justify-content: space-around;
  align-content: center;
}
/*154/88*/
.myimg {

  height: 154px;
  width: 88px;
}
.myheight{
  height: 154px;
  width: 25%;
}

.myfont {
  font-family: PingFangSC-Medium;
  font-size: 14px;
  color: #00AEFF;
  line-height: 20px;
  font-weight: 500;
}

.myfont2 {
  font-family: PingFangSC-Regular;
  font-size: 12px;
  color: #00AEFF;
  text-align: center;
  line-height: 12px;
  font-weight: 400;
}

.myposition {
  text-align: center;
  width: 100px;
  position: absolute;
  left: 50%;
  margin-left: -50px;
}

</style>

